<script setup>
import dayjs from "dayjs";
import {reactive, ref} from 'vue'
import axios from "axios";
import {getUuid} from "ant-design-vue/es/vc-notification/HookNotification.js";
import GlobalConfig from "@/GlobalParams.js";
import {message} from "ant-design-vue";

let finObj=reactive({})
finObj.tablekKey = getUuid().toString();//Guid UUid，雪花id--GUID，雪花id
finObj.costTime = dayjs()
finObj.costMoney = 0
finObj.costReason="就是想花钱"
finObj.userId = localStorage.getItem("userId")
finObj.delFlag=0

let emit = defineEmits(["added"])

function addInfo(){
  axios.post(GlobalConfig.postUrl + "/financialBook/Add",finObj,GlobalConfig.postHeader).then(res=>{
    if(res.data === "success"){
      message.success("保存成功。")
      emit("added", finObj);
    }
    else {
      message.error("保存失败，原因：" + res.data);
    }
  })
}



</script>

<template>
  <a-row :gutter="[8,8]">
    <a-col :span="4" class="titleClass">收支时间：</a-col>
    <a-col :span="20" class="inputClass">
      <a-date-picker v-model:value="finObj.costTime"></a-date-picker>
    </a-col>
    <a-col :span="4" class="titleClass">收支金额：</a-col>
    <a-col :span="20" class="inputClass">
      <a-input-number v-model:value="finObj.costMoney"></a-input-number>
    </a-col>
    <a-col :span="4" class="titleClass" style="height: 60px;line-height: 60px">收支原因：</a-col>
    <a-col :span="20" class="inputClass" style="height: 60px">
      <a-textarea v-model:value="finObj.costReason"></a-textarea>
    </a-col>
  </a-row>
  <div style="text-align: right;margin-top: 10px">
  <a-button type="primary" @click="addInfo" >确定</a-button>
  </div>
</template>

<style scoped>
.titleClass{
  background: #dbeeff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.inputClass{
  height: 40px;
  line-height: 30px;
  font-size: 14px;
  border: 1px solid #dbeeff;
}
</style>